{include file="common/header" /}
<link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style>
    body {
        background-color: #ffffff;
    }
    .img-item {
        position: relative;
        width: 96px;
        height: 96px;
        border-radius: 6px;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .img-item img {
        border-radius: 6px;
        width: 100%;
        height: 100%;
    }
    .img-item i {
        font-size: 20px;
        position: absolute;
        top: -10px;
        right: -10px;
    }

</style>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>用户添加</legend>
</fieldset>
<div class="layui-form layuimini-form">
    

    <div class="layui-form-item">
        <label class="layui-form-label required">姓名</label>
        <div class="layui-input-block" style="width: 60%;">
            <input type="text" class="layui-input" name="name"  value="" autocomplete="off" placeholder="请输入用户名">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">手机号</label>
        <div class="layui-input-block" style="width: 60%;">
            <input type="text" name="mobile" autocomplete="off" class="layui-input" placeholder="请输入手机号">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">密码</label>
        <div class="layui-input-inline" style="width: 60%;">
            <input type="password" class="layui-input" name="password" value="" autocomplete="off" placeholder="请输入密码">
        </div>
        <div class="layui-form-mid layui-text-em">密码为空默认为：123456</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">头像</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="image_up">
              <i class="layui-icon layui-icon-upload"></i> 图片上传
            </button>
            
            <div class="pic" id="image_show" style="margin-top:10px;">
                  
            </div>
            <!-- <div class="add" id="image_up">
                <i class="layui-icon layui-icon-add-1" ></i>
            </div> -->

        </div>
    </div>

    <!-- <div class="layui-form-item">
        <label class="layui-form-label ">姓名</label>
        <div class="layui-input-block" style="width: 60%;">
            <input type="text" name="username" autocomplete="off" class="layui-input" placeholder="请输入姓名">
        </div>
    </div> -->

    <div class="layui-form-item">
        <label class="layui-form-label ">性别</label>
        <div class="layui-input-block" style="width: 60%;">
            <input type="radio" name="sex" value="1" title="男" checked>
            <input type="radio" name="sex" value="2" title="女" > 
        </div>
    </div>

   <!--  <div class="layui-form-item">
        <label class="layui-form-label " >身份证</label>
        <div class="layui-input-block" style="width: 60%;">
            <input type="text" name="card_num" autocomplete="off" class="layui-input" placeholder="请输入身份证">
        </div>
    </div> -->

    <div class="layui-form-item">
        <label class="layui-form-label ">公司名称</label>
        <div class="layui-input-block" style="width: 60%;">
            <input type="text" name="unit" autocomplete="off" class="layui-input" placeholder="请输入单位">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地区</label>
        <div class="layui-input-inline" >
          <select name="province_id" lay-filter="changeShen">
            <option value="">请选择省</option>
            {volist name="$shen_list" id="vo"}
            <option value="{$vo.id}" >{$vo.name}</option>
            {/volist}
          </select>
        </div>
        <div class="layui-input-inline">
          <select id="city" name="city_id" lay-filter="changeCity">
            <option value="">请选择市</option>
          </select>
        </div>
        <div class="layui-input-inline">
          <select id="area" name="area_id">
            <option value="">请选择县/区</option>
          </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">联系名称</label>
        <div class="layui-input-block" style="width: 60%;">
            <input type="text" name="contacts" autocomplete="off" class="layui-input" placeholder="请输入联系名称">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">联系电话</label>
        <div class="layui-input-block" style="width: 60%;">
            <input type="text" name="contacts_mobile" autocomplete="off" class="layui-input" placeholder="请输入联系电话">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="act" value="add">
            <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>

            <button class="layui-btn layui-btn-primary" onclick="javascript:history.go(-1)" >返回</button>
        </div>
    </div>
</div>

<script>

    layui.use(['form','iconPickerFa','upload','laydate'], function () {
        var form = layui.form,
            iconPickerFa = layui.iconPickerFa,
            layer = layui.layer,
            upload = layui.upload,
            laydate = layui.laydate,
            $ = layui.$;

        laydate.render({
            elem: '#ID-laydate-demo'
        });

        window.imgdelete = function(dom){
            $(dom).parent().remove();
        }


        form.on('select(changeShen)', function (data) {
             //获取当前选中下拉项的 value值
            var id = data.value;
            $.ajax({
                url:"{:url('Region/getRegionList')}",
                data:{'parent_id':id,'level':2},
                type:'post',
                dataType:'json',
                success:function(res){
                    console.log(res)
                    let html = '<option value="">请选择市</option>';
                    let data = res.data;
                    for(let i=0;i<data.length;i++){
                        html += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
                    }
                    $("#city").html(html);
                    $("#area").html('<option value="">请选择区</option>');
                    form.render();
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });
        });

        
        form.on('select(changeCity)', function (data) {
             //获取当前选中下拉项的 value值
            var id = data.value;
            $.ajax({
                url:"{:url('Region/getRegionList')}",
                data:{'parent_id':id,'level':3},
                type:'post',
                dataType:'json',
                success:function(res){
                    console.log(res)
                    let html = '<option value="">请选择区</option>';
                    let data = res.data;
                    for(let i=0;i<data.length;i++){
                        html += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
                    }
                    $("#area").html(html);
                    form.render();
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });
        });

        upload.render({
            elem: '#image_up'
            ,url: "{:url('Index/dyupload')}" 
            // ,multiple: true
            //,accept: 'file' //普通文件
            ,field: 'dypic'
            ,before: function(obj){
            }
            ,done: function(res){
              if(res.errcode){
                var html = '';
                html +='<div class="img-item">';
                if(res.count == 'file'){
                    html +='    <a href="'+ res.data +'" target="_blank"><img data-url="'+res.data+'" src="/public/static/images/pdf.png" alt=""></a>';
                }else{
                    html +='    <a href="'+ res.data +'" target="_blank"><img data-url="'+res.data+'" src="'+ res.data +'" alt=""></a>';
                }
                html +='    <i  class="layui-icon layui-icon-close-fill" onclick="imgdelete(this)"></i>';
                html +='</div>';
                
                $('#image_show').html(html)
              }
            }
        });


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.load(1, {
                shade: [0.3,'#000'] //0.1透明度的白色背景
            });
            var data = data.field;

            var back_new_car_image=$("#image_show .img-item img").map(function(){
                    return ( $(this).attr("data-url") );
                }).get();
                data.head_pic = back_new_car_image;
            $.ajax({
                url:"{:url('users/add')}",
                data:data,
                type:'post',
                dataType:'json',
                success:function(res){
                    // layer.close(index);
                    // console.log(res)
                    // return false
                    if(res.errcode != 1){
                        layer.msg(res.message,{icon: 2,time: 2000},function(){
                            layer.close(index);
                        })
                    }else{
                        layer.msg(res.message,{icon: 1,time: 1000},function () {
                            window.location.href = "{:url('users/list')}";
                        })
                    }
                    layer.close(index);
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });

            return false;
        });

    });
</script>
</body>
</html>